
<template>
  <div class="excelImport">
    <input v-show="false" ref="upload" :accept="accept" type="file" >
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
  name: 'ExcelImports',
  props: {
    accept: {
      // 允许上传的文件格式
      type: String,
      default: '.xls,.xlsx'
    },
    dataRow: {
      // 数据开始列 这个注意excel一定要有表头
      type: Number,
      default: 0,
      validator: (val) => {
        return val >= 0
      }
    },
    isDataHeader: {
      // 数据开始列 这个注意excel一定要有表头
      type: Boolean,
      default: false
    },
    valueMatch: {
      // 数据列 必须与excel中的表列顺序相对应
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  mounted() {
    // 绑定更改事件监听
    this.$nextTick(() => {
      this.$refs.upload.removeEventListener('change', this.handleFileChange)
      this.$refs.upload.addEventListener('change', this.handleFileChange)
    })
  },
  beforeDestroy() {
    // 移除更改事件监听
    this.$refs.upload.removeEventListener('change', this.handleFileChange)
  },
  methods: {
    cleanUpload() {
      // 清空input值
      this.$refs.upload.value = null
    },
    // 文件上传事件
    handleFileChange(event) {
      // 这边也可以封装成多个文件上传的形式 目前是单个文件
      this.handleReadExcel(event.target.files[0], event.target)
    },
    // （重点）把文件按照二进制读取
    handleReadExcel(file, target) {
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          const fileData = ev.target.result
          const workbook = XLSX.read(fileData, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0] // 取第一张表(也可以取多个sheet)
          const snArr = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], { defval: '' }) // 生成json表格内容
          this.excelDataToJson(snArr)
        } catch (e) {
          console.log(e)
          return false
        }
      }
      fileReader.readAsBinaryString(file)
      target.value = ''
    },
    // 表格数据转换
    excelDataToJson(snArr) {
      const retn = []
      // 如果数据不在第一列 则到相应列去取数据
      if (this.dataRow) {
        snArr = snArr.slice(this.dataRow, snArr.length)
      }
      // 如果不用匹配数据则直接返回原始数据
      const snKeys = Object.keys(snArr[0])
      // if (!this.valueMatch || this.valueMatch.length === 0) {
      if (!this.valueMatch || this.valueMatch.length === 0) {
        // 输出原始数据自己在组件外进行处理
        // this.$emit('changeExcel', snArr)
        if (this.isDataHeader) {
          this.$emit('changeExcel', {
            'snKeys': snKeys, 'retn': snArr
          })
          return
        } else {
          this.$emit('changeExcel', snArr)
        }
      }
      // 获取一个元素的key值（excel表格原始的key）
      // const snKeys = Object.keys(snArr[0])
      snArr.forEach((snItem) => {
        const pushItem = {}
        // 匹配我们传入的新属性
        this.valueMatch.forEach((item, index) => {
          pushItem[item] = snItem[snKeys[index]]
        })
        retn.push(pushItem)
      })
      // 输出匹配后的数据
      this.$emit('changeExcel', retn)
    },
    // 打开上传
    open() {
      this.$nextTick(() => {
        this.$refs.upload.click()
      })
    }
  }
}
</script>
